<template>
  <el-scrollbar ref="scrollbarRef">
    <el-button
      style="margin: 20px auto;"
      @click="next"
    >下一步骤</el-button>
    <el-steps
      ref="stepsRef"
      align-center
      finish-status="success"
      :process-status="processStatus"
      :active="stepActive"
      :class="[{
        'is-error': processStatus=='error'
      }]">
      <el-step
        v-for="(item, i) in stepData"
        :key="i"
        :title="item.title" />
    </el-steps>
    <component
      :is="activeData.component[processStatus] || activeData.component"
      :key="activeData.step"
    />
  </el-scrollbar>
</template>

<script setup>
// 基本项目信息
import BasicInfor from './components/basic/index.vue'
// 补充其他资料
import Supplement from './components/supplement/index.vue'
// 保函文本确认
import Confirm from './components/confirm.vue'
// 签约缴费
import Contract from './components/contract/index.vue'
// 出具保函
import Issue from './components/issue/index.vue'
// 审核
import Audit from './components/audit.vue';

// 步骤
const stepData = reactive([
  {
    title: '基本项目信息填写',
    step: 0,
    component: {
      'process': markRaw(BasicInfor),
      'finish': markRaw(Audit),
    }
  },
  {
    title: '补充其他资料',
    step: 1,
    component: {
      'process': markRaw(Supplement),
      'finish': markRaw(Audit),
    }
  },
  {
    title: '保函文本确认',
    step: 2,
    component: markRaw(Confirm)
  },
  {
    title: '签约缴费',
    step: 3,
    component: markRaw(Contract)
  },
  {
    title: '出具保函',
    step: 4,
    component: markRaw(Issue)
  }
])
// 当前激活步骤
const stepActive = ref(0)
// 获取当前激活步骤数据
const activeData = computed(() => {
  return stepData.find(x => x.step == stepActive.value)
})

// 设置当前步骤的状态
const processStatus = ref('process')
// 设置当前步骤状态
function setStatus(status='process'){
  processStatus.value = status
}
provide("setStatus", setStatus)

// 切换指定组件
const scrollbarRef = ref(null)
function toComponent(key){
  setStatus()
  if(!key?.toString()){
    return stepActive.value++
  }
  stepActive.value = key
  scrollbarRef.value?.setScrollTop(0)
}
provide("toComponent", toComponent)



// 模仿
const next = () => {
  setStatus()
  stepActive.value++
  if (stepActive.value > 4) stepActive.value = 0
}
</script>

<style lang="scss" scoped>
.el-scrollbar{
  padding: 0 20px;
}
// wait     步骤处于等待过程，还未开始
// process  步骤正在执行的过程，进行中
// finish   步骤已执行完成,审核中
// success  步骤已执行完成
// error    步骤执行错误
.el-steps{
  margin-bottom: 30px;
  &.is-error :deep(.el-step){
    .el-step__head.is-success{
      .el-step__icon{
        color: #FCFCFC;
        background-color: #777777;
      }
      .el-step__line-inner{
        color: #333333;
      }
    }
    .el-step__main .el-step__title.is-success{
      color: #777777;
    }
  }
  :deep(.el-step){
    .el-step__head{
      .el-step__icon{
        width: 50px;
        height: 50px;
        font-weight: 700;
        font-size: 24px;
        border-width: 3px;
      }
      .el-step__line{
        top: 50%;
        transform: translateY(-50%);
        padding: 0 20%;
        height: 0;
        &-inner{
          color: #797979;
          border-width: 1px !important;
          width: 100% !important;
        }
      }
      &.is-process .el-step__icon{
        color: #FCFCFC;
        background-color: #E06B00;
      }
      &.is-wait .el-step__icon{
        color: #777777;
        border-color: #777777;
      }
      &.is-error .el-step__icon{
        color: #FCFCFC;
        background-color: #D81E06;
      }
      &.is-finish,
      &.is-success{
        .el-step__icon{
          color: #FCFCFC;
          background-color: #377B1F;
        }
      }
      &.is-finish .el-step__line-inner{
        color: #E06B00;
        display: flex;
        align-items: center;
        justify-content: center;
        &::after{
          content: '';
          width: 36px;
          height: 36px;
          display: block;
          background-color: #fff;
          background-image: url('@/assets/images/wait-review.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
      &.is-success .el-step__line-inner{
        color: #55C432;
      }
    }
    .el-step__main{
      margin-top: 5px;
      .el-step__title {
        font-weight: 700;
        font-size: 24px;
        display: inline-block;
        padding-bottom: 5px;
        position: relative;
        &.is-process{
          color: #E06B00;
          &::after{
            content: '';
            width: 100%;
            height: 1px;
            display: block;
            background-color: #E06B00;
            position: absolute;
            bottom: 0;
          }
        }
        &.is-finish,
        &.is-success{
          color: #377B1F;
        }
        &.is-wait{
          color: #777777;
        }
        &.is-error{
          color: #D81E06;
        }
      }
    }
  }
}

:deep(.el-table){
  --el-table-header-bg-color: #FC7000;
  --el-table-header-text-color: #F9F9F9;
  // --el-table-border-color: #797979;
  font-size: 13px;
  color: #333333;
}
</style>
